<template>
	<view class="page-container">
		<view class="status_bar"></view>
		<view style="display: flex; align-items: center; height: 88rpx; position: relative;">
			<image src="/static/indicator-back.png" style="width: 48rpx; height: 48rpx; position: absolute; top: 20rpx; left: 32rpx;" @tap="navBack"></image>
			<view style="font-size: 36rpx; font-weight: 600; flex: 1; text-align: center;">关于我们</view>
		</view>
		
		<view style="display: flex; justify-content: center; padding-top: 128rpx;">
			<image src="/static/logo.png" style="width: 128rpx; height: 128rpx; border-radius: 16rpx;"></image>
		</view>
		<view style="display: flex; justify-content: center; margin-top: 32rpx; font-size: 48rpx; font-weight: 800; color: black;">{{appName}}</view>
		<view style="display: flex; justify-content: center; margin-top: 10rpx; font-size: 32rpx; color: rgba(153, 153, 153, 1);">{{appVersion}}</view>
		
		
		<view class="nav-box">
			<view class="nav-item" @tap="settingItemClick(settings.serviceUrl, '服务条款')">
				<view class="nav-title">服务条款</view>
				<image src="/static/indicator-right.png" class="nav-icon"></image>
			</view>
			<view class="nav-divider"></view>
			<view class="nav-item"  @tap="settingItemClick(settings.privacyUrl, '隐私协议')">
				<view class="nav-title">隐私协议</view>
				<image src="/static/indicator-right.png" class="nav-icon"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { http } from '@/utils/request'
	import { appName, appVersion } from '@/config/config';
	import { onMounted } from 'vue';
	import { onLoad,onShow } from "@dcloudio/uni-app";
	
	
	const settings = reactive({
		serviceUrl: '',
		privacyUrl: '',
	})
	
	
	const settingItemClick = (url,title) => {
		uni.navigateTo({
			url: '/pages/common/web?url=' + url + '&title=' + title
		})
	}
	
	const navBack = ()=>{
		uni.navigateBack();
	}
	
	onLoad((options)=>{
		http.request({
			url: '/app/settings/all',
			method: 'GET'
		}).then(resp => {
			Object.assign(settings, resp.data);
		})
	})
	
</script>

<style lang="scss" scoped>
	
	.page-container {
		min-height: 500rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(90deg, rgba(194, 253, 255, 1) 0%, rgba(228, 252, 182, 1) 100%);
		
	}
	
	
	.nav-box {
		margin-top: 120rpx;
		background: rgba(250, 250, 250, 1);
		margin-left: 32rpx;
		margin-right: 32rpx;
		
		.nav-item {
			height: 108rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			align-items: center;
			
			.nav-icon {
				width: 48rpx;
				height: 48rpx;
			}
			
			.nav-title {
				flex: 1;
				margin-left: 10rpx;
				margin-right: 16rpx;
			}
		}
		
		.nav-divider {
			height: 1rpx;
			border-bottom: 1rpx dashed rgba(241, 241, 241, 1);
		}
	}
</style>